<!DOCTYPE html>
<html lang="en">

<head>
    <title>买钻</title>
    <#include "/toupiao/components/meta.html" />
    <#include "/toupiao/components/stylesheets.html" />
    <link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
    <link rel="stylesheet" href="/toupiao/stylesheets/buyDiamond.css">
</head>

<body>
    <div id="app">
        <ul class="am-avg-sm-2 price-list-ul">
            <#list items as item>
                <li>
                    <div class="price">
                        <div class="price-info">
                            <span>${item.price!}元</span>
                            <span>${item.vote!}钻</span>
                            <div class="am-cf"></div>
                        </div>
                        <div class="price-button">
                            <a href="javascript:" class="am-btn am-btn-default am-btn-sm payButton" role="button" data-id="${item.id!}">立即购买</a>
                        </div>
                        <!-- <a href="#">
                            <div class="price-cover"></div>
                        </a> -->
                    </div>
                </li>
            </#list>
        </ul>
        <div class="information">
            <div>特别说明</div>
            <div>
                <span>1. 1钻 = ${activity.votePerDiamond!}票；<br />2. 购买后立即加票</span>
            </div>
        </div>
    </div>
    <#include "/toupiao/components/scripts.html" />
    <#include "/toupiao/components/wxConfig.html" />
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
    <script>
    $(document).ready(function() {
        $(".payButton").click(function() {
            // window.location.href = "/toupiao/pay?id=" + $(this).attr("data-id");
            axios.get("/toupiao/pay?id=" + $(this).attr("data-id") + "&joinCode=${joinCode!}")
                .then(function(response) {
                    if (response.data.status == 200) {
                        wx.chooseWXPay({
                            timestamp: response.data.info.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: response.data.info.nonceStr, // 支付签名随机串，不长于 32 位
                            package: response.data.info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: response.data.info.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: response.data.info.paySign, // 支付签名
                            success: function(res) {
                                layer.msg("支付成功")
                                //window.location.href = '/fd/orderStatus?orderNo=' + orderNo;
                            }
                        });
                    } else {
                        layer.msg("购买失败：" + response.data.status + ":" + response.data.msg);
                        console.log(response);
                    }
                })
                .catch(function(error) {
                    layer.msg("购买失败：" + error);
                    console.log(error);
                });
            // layer.msg("购买失败");
        })
        $(".price").click(function() {
            $(".price").each(function() {
                $(this).removeClass("active");
            })
            $(this).addClass("active");
        })
    })
    </script>
</body>

</html>